<template>
  <el-container v-if="series" class="el-container">
    <!--suppress JSValidateTypes -->
    <items-slider id="maker-widgets-panel" :collection="collection" />
    <div id="maker-display-panel">
      <div v-if="series_.collections" class="display-panel-main-body">
        <el-tabs v-model="index" class="core-tabs" tab-position="top" type="border-card">
          <el-tab-pane
            v-for="(c, i) in series_.collections"
            :key="c.name"
            :label="c.label"
            :name="i"
          >
            <div class="display-panel-content">
              <component
                :is="getLayout(c.layout.name)"
                v-model:elements="attributes_[c.name]"
                v-model="local[c.name]"
                :collection="c"
                v-bind="$attrs"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div id="maker-extend-panel">
      <div id="maker-toolbar-panel">
        <code-editor-button
          v-model="attributes_"
          type="primary"
          label="查看源码"
          icon="i-ep-search"
        />
        <el-button icon="i-ep-Promotion" type="success" @click="submit">提交源码</el-button>
      </div>
      <el-tabs
        id="maker-property-panel"
        v-model="propertyPanel"
        stretch
        tab-position="top"
        type="border-card"
      >
        <el-tab-pane label="元素配置" name="property">
          <div id="maker-item-config-panel" class="widget-config"></div>
        </el-tab-pane>
        <el-tab-pane id="maker-self-config-panel" label="本体配置" name="self">
          <div class="widget-config">
            <epx-form v-model="attributes_" :fields="series_.fields" :toolbar="false"></epx-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-container>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import ItemsSlider from './ItemsSlider.vue';
  import EpxForm from '../form/EpxForm.vue';
  import { Collection, SeriesName, getSeries } from './structure';
  import { Panel } from './PropertyPanel';
  import { getLayout } from './layouts';
  import CodeEditorButton from '../editor/CodeEditorButton.vue';

  // document.body.ondrop = function (event) {
  //   event.preventDefault();
  //   event.stopPropagation();
  // };

  const props = defineProps<{
    /**
     * 定义
     */
    series: SeriesName;
    /**
     * 生成的结果
     */
    modelValue?: unknown;
  }>();

  const emit = defineEmits(['update:model-value']);

  const series_ = computed(() => getSeries(props.series));

  /**
   * 属性面板控制
   */
  const openPropertyPanel_ = ref<boolean>(false);

  Panel.onOpen(() => {
    openPropertyPanel_.value = true;
  });

  Panel.onClose(() => {
    openPropertyPanel_.value = false;
  });

  const propertyPanel = computed<string>({
    get: () => (openPropertyPanel_.value ? 'property' : 'self'),
    set: (v) => {
      v === 'property' ? Panel.open() : Panel.close();
    }
  });

  Panel.close();

  /**
   * 当前的配置面板序号
   */
  const index = ref(0);
  /**
   * 当前的配置面板参数
   */
  const collection = computed<Collection>(() => series_.value.collections[index.value]);

  /**
   * 生成的配置项, 这里直接保存
   */
  const attributes_ = ref(props.modelValue || {});

  const submit = () => emit('update:model-value', attributes_);

  /**
   * 配置项的值
   */
  const local = ref<Record<string, unknown>>({});
</script>

<script lang="ts">
  // 声明额外的选项
  // noinspection JSUnusedGlobalSymbols
  export default {
    inheritAttrs: false
  };
</script>

<style scoped>
  .el-container {
    display: flex;
    height: calc(100vh - 140px);
    background: #ffffff;
    align-items: stretch;
  }

  #maker-widgets-panel {
    width: 300px;
  }

  #maker-display-panel {
    flex-grow: 1;
    padding: 15px;
    background-color: #eeeeee;
    display: flex;
    flex-direction: column;
  }

  #maker-extend-panel {
    width: 320px;
    display: flex;
    justify-content: center;
    background-color: #eeeeee;
    flex-direction: column;
    overflow-x: hidden !important;
    flex-shrink: 0;
  }

  #maker-display-panel .display-panel-main-body {
    background-color: #ffffff;
    flex-grow: 1;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
  }

  #maker-property-panel {
    flex-grow: 1;
  }

  .core-tabs {
    flex-grow: 1;
  }

  #maker-toolbar-panel {
    margin-bottom: 10px;
  }
</style>
